<!--
 ՞˶･֊･˶՞ಣ Author       : Charlie
 ՞˶･֊･˶՞ಣ Date         : 2024-11-12 19:12:19
 ՞˶･֊･˶՞ಣ LastEditors  : Charlie
 ՞˶･֊･˶՞ಣ LastEditTime : 2024-12-01 02:25:24
 ՞˶･֊･˶՞ಣ Description  : 打印模板数据展示
-->
<template>
  <div>
    <div v-if="!isEdit">
      <el-card class="myCard">
        <div slot="header">
          <span>打印模板</span>
          <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
        </div>
        <div>
          <el-table :data="tableData" border style="width: 100%" :row-style="{ height: '0' }"
            :cell-style="{ padding: '3px' }">
            <el-table-column prop="date" label="模板id" width="180" align="center">
            </el-table-column>
            <el-table-column prop="name" label="模板名称" align="center">
            </el-table-column>
            <el-table-column prop="isTrue" label="是否启用" width="180" align="center">
              <template v-slot="scoped">
                <el-switch :value="scoped.row.isTrue"></el-switch>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="180px" align="center">
              <template v-slot="scope">
                <el-button type="text" @click="editFn(scope.row)">编辑</el-button>
                <el-button type="text" @click="viewFn(scope.row)">预览</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
      <el-card class="myCard">
        <div slot="header">
          <span>打印示例</span>
          <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
        </div>
        <div>
          <el-table :data="tableData" border style="width: 100%" :row-style="{ height: '0' }"
            :cell-style="{ padding: '3px' }">
            <el-table-column prop="date" label="模板名称" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="是否禁用"> </el-table-column>
            <el-table-column fixed="right" label="操作" width="180px" align="center">
              <template v-slot="">
                <el-button type="text">打印</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </div>
    <printIndex v-else :item="activeItem" @getJson="getJson"></printIndex>
    <printPreview v-if="isPreview" ref="printPreview"></printPreview>
  </div>
</template>

<script>
import printIndex from '@/components/Print/index'
import printPreview from '@/components/Print/printPreview'

export default {
  name: 'PrintPage',
  components: {
    printIndex,
    printPreview
  },
  data() {
    return {
      isEdit: false,
      isPreview: false,
      tableData: [
        {
          date: '001',
          name: '支出证明单模板',
          address: '上海市普陀区金沙江路 1518 弄',
          isTrue: true,
          json: null,
        },
        {
          date: '002',
          name: '模板1',
          address: '上海市普陀区金沙江路 1517 弄',
          isTrue: false,
          json: null,
        },
        {
          date: '003',
          name: '模板2',
          address: '上海市普陀区金沙江路 1519 弄',
          isTrue: true,
          json: null,
        },
        {
          date: '004',
          name: '模板3',
          address: '上海市普陀区金沙江路 1516 弄',
          isTrue: true,
          json: null,
        },
      ],
      activeItem: {},
    }
  },

  mounted() { },

  methods: {
    editFn(item) {
      console.log(item, 'item')
      this.activeItem = item
      this.isEdit = true
      // this.$router.push({
      //   path : '/printEdit'
      // })
    },
    viewFn(item) {
      this.activeItem = item
      this.isPreview = true
      this.$nextTick(() => {
        const data = {
          title: item.date,//单据标题
        }
        this.$refs.printPreview.previewFn(item.json, data)
      })
    },
    getJson(val) {
      this.tableData.forEach((item) => {
        if (item.date === this.activeItem.date) {
          item.json = val
        }
      })
      this.activeItem = null
    },
  },
}
</script>
<style lang="scss" scoped>
.myCard {
  text-align: left;
  margin-bottom: 12px;
}
</style>
